<template>
	<e-popup :show="show" :round="10"  @close="$emit('close')">
		<view class="app-invoice bg-white">
			<view class="app-invoice__header e-rela e-flex-xy-center">
				<view class="w-600 e-font-32">
					发票
				</view>
				<image class="app-invoice__close img-36 e-abso" :src="$staticPath('classify/close.png')" @tap="$emit('close')"></image>
			</view>
			<view class="e-p-30">
				<view class="e-font-28 w-600 e-m-b-30">发票类型</view>
				<view class="e-m-b-30 app-invoice__btnbox">
					<text>电子普通发票</text>
				</view>
				<view class="app-invoice__line">
					
				</view>
			</view>
			<view class="e-p-30">
				<view class="e-font-28 w-600 e-m-b-30">发票抬头</view>
				<view class="e-flex">
					<view class="e-m-b-30 app-invoice__btnbox1 e-m-r-20" :class="{'app-invoice__btnbox':form.billToType === 1}" @tap="form.billToType = 1">
						<text>个人</text>
					</view>
					<view class="e-m-b-30 app-invoice__btnbox1 e-m-r-20" :class="{'app-invoice__btnbox':form.billToType === 2}" @tap="form.billToType = 2">
						<text>单位</text>
					</view>
				</view>
				<view class="e-flex app-invoice__form e-m-b-30" v-if="form.billToType === 1">
					<view class="app-invoice__form--title">
						<text class="e-font-24">个人名称</text>
					</view>
					<view class="flex-1">
						<input v-model="form.billToName" placeholder="请填写“个人”或您的姓名" type="text" name="" id="" />
					</view>
				</view>
				<template v-else>
					<view class="e-flex app-invoice__form e-m-b-30">
						<view class="app-invoice__form--title">
							<text class="e-font-24">单位名称</text>
						</view>
						<view class="flex-1">
							<input v-model="form.billToName" placeholder="请填写单位名称" type="text" name="" id="" />
						</view>
					</view>
					<view class="e-flex app-invoice__form e-m-b-30">
						<view class="app-invoice__form--title">
							<text class="e-font-24">纳税人识别码</text>
						</view>
						<view class="flex-1">
							<input v-model="form.taxId" placeholder="请填写纳税人识别号" type="text" name="" id="" />
						</view>
					</view>
					<view class="e-flex app-invoice__form e-m-b-30">
						<view class="app-invoice__form--title">
							<text class="e-font-24">注册地址</text>
						</view>
						<view class="flex-1">
							<input v-model="form.registeredAddress" placeholder="请填写注册地址" type="text" name="" id="" />
						</view>
					</view>
					<view class="e-flex app-invoice__form e-m-b-30">
						<view class="app-invoice__form--title">
							<text class="e-font-24">注册电话</text>
						</view>
						<view class="flex-1">
							<input v-model="form.registeredPhone" placeholder="请填写注册电话" type="text" name="" id="" />
						</view>
					</view>
					<view class="e-flex app-invoice__form e-m-b-30">
						<view class="app-invoice__form--title">
							<text class="e-font-24">开户银行</text>
						</view>
						<view class="flex-1">
							<input v-model="form.bankName" placeholder="请填写单位开户银行" type="text" name="" id="" />
						</view>
					</view>
					<view class="e-flex app-invoice__form e-m-b-30">
						<view class="app-invoice__form--title">
							<text class="e-font-24">银行账号</text>
						</view>
						<view class="flex-1">
							<input v-model="form.bankAccount" placeholder="请填写单位银行账号" type="text" name="" id="" />
						</view>
					</view>
				</template>
				<view class="app-invoice__line">
					
				</view>
			</view>
			<view class="e-p-l-30 e-p-r-30 e-p-b-30">
				<view class="e-font-28 w-600 e-m-b-30">收票人信息</view>
				<view class="e-flex app-invoice__form e-m-b-30">
					<view class="app-invoice__form--title">
						<text class="e-font-24">收票人邮箱</text>
					</view>
					<view class="flex-1">
						<input v-model="form.email" placeholder="用来接收数电票和电子发票邮件" type="email" name="" id="" />
					</view>
				</view>
				<view class="app-invoice__line">
					
				</view>
			</view>
			<view class="e-p-l-30 e-p-r-30">
				<view class="e-font-28 w-600 e-m-b-30">发票内容</view>
				<view class="e-m-b-30 app-invoice__btnbox">
					<text>商品明细</text>
				</view>
				<view class="e-font-22" style="color: #BBBBBB;">
					发票内容将显示详细商品名称与价格信息，发票金额为实际支付金额，不含虚拟资产、优惠等扣减金额。
				</view>
			</view>
			<view class="e-p-30">
				<view class="app-invoice__btn e-flex-xy-center" @tap="submit">
					<text class="e-font-28 c-white w-500">确定</text>
				</view>
			</view>
		</view>
	</e-popup>
</template>

<script setup lang="ts">
	import { ref, computed, watch } from 'vue';
	import { useCurrentInstance} from '@/common/hooks';
	const props = defineProps<{
		value:boolean
	}>();
	
	const emit = defineEmits(['update:value','submit'])
	
	const ctx = useCurrentInstance()
	
	const show = computed({
		get(){
			return props.value
		},
		set(v){
			emit('update:value', v)
		}
	})
	
	const form = ref({
		email:'',
		billToType:1,
		billToName:'',
		taxId:'',
		registeredAddress:'',
		registeredPhone:'',
		bankName:'',
		bankAccount:'',
	})
	
	const submit = () => {
		if (!form.value.email || !form.value.billToName) return
		if (form.value.billToType === 2 && !form.value.taxId) return
		emit('submit',form.value)
	}
	
</script>

<style lang="scss" scoped>
	@include appBem_b(invoice) {
		border-radius: 20rpx 20rpx 0 0;
		@include appBem_e(header) {
			width:100vw;
			height: 108rpx;
			background: #FFFFFF;
			border-radius: 20rpx 20rpx 0px 0px;
		}
		@include appBem_e(close) {
			top: 32rpx;
			right: 30rpx;
		}
		@include appBem_e(line) {
			height: 1rpx;
			background: #F0F0F0;
		}
		@include appBem_e(btnbox1) {
			background: #F5F5F5;
			border-radius: 38rpx;
			display: inline-block;
			font-size: 24rpx;
			color: #353535;
			padding: 14rpx 30rpx 12rpx 30rpx;
		}
		@include appBem_e(btnbox) {
			display: inline-block;
			background: rgba(75,104,227,0.1);
			border-radius: 38rpx;
			border: 2rpx solid #4B68E3;
			font-size: 24rpx;
			color: #4B68E3;
			padding: 14rpx 30rpx 12rpx 30rpx;
		}
		@include appBem_e(form) {
			@include appBem_m(title) {
				flex: 0 0 180rpx;
			}
		}
		@include appBem_e(btn) {
			height: 90rpx;
			background: #4B68E3;
			border-radius: 46rpx;
		}
	}
</style>